﻿@using System.Web
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机构设置</title>
    <!-- 引入样式 -->

    @* <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script> *@
    <script src="~/lib/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <script src="//unpkg.com/element-plus"></script>

    <style>
        a {
            text-decoration: none; /* 去除下划线 */
        }
        /* 添加页面背景色 */
        body {
            background-color: #FFFFCC; /* 示例浅灰色，可替换为你的图片主色值 */
        }

        .el-table {
            background-color: white; /* 表格白底，与背景色区分 */
        }

        .solid-table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

            .solid-table td, .solid-table th {
                border: 1px solid #333;
                padding: 8px;
                text-align: left;
                word-break: break-all;
            }

        .bj {
            background-color: #FFD553;
            font-weight: bold;
        }
    </style>

</head>
<body>

    <!-- Vue 挂载点 -->
    <div id="app">
        <span>您正在做的业务是:人力资源管理--薪酬标准管理--薪酬标准登记查询</span><br />
        <br />
        <div>
            薪酬单编号：{{ss_id}}
        </div>  
        <br />
        <table style="width:100%">
            <tr>
                <td>本机构总人数:{{total}}， 基本薪酬总数:{{total2}}，实发总额:{{total3}}</td>
                <td style="text-align: right;">登记人:{{djr}} &nbsp&nbsp登记时间:<span>{{djsj}}</span></td>
            </tr>
        </table>
        
        <table class="solid-table">
            <thead>
                <tr class="bj">
                    <th v-for="(header, index) in salaryStandardDetailsHeaders" :style="{ width: getColumnWidth(index) }" :key="index">{{ header }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.human_id }}</td>
                    <td>{{ item.human_name }}</td>
                    <td>
                        <a href="javascript:void(0)" v-on:click="openDetailModal(item)">详细内容</a>
                    </td>
                    <td>{{ item.bouns_sum }}</td>
                    <td>{{ item.sale_sum }}</td>
                    <td>{{ item.deduct_sum }}</td>
                    <td>{{ item.salary_paid_sum }}</td>

                </tr>
            </tbody>
        </table>
        <br />
        <div style="text-align:center">
            <el-button type="primary" onclick="history.back()">返回</el-button>
        </div>
        <!-- 详细内容模态框 -->
        <el-dialog v-model="detailModalVisible" title="薪酬详细内容" :width="500" center :before-close="handleDetailClose">
            <table class="solid-table">
                <tr v-for="(item, index) in tableData3" :key="index">
                    <td>{{item.item_name}}</td>
                    <td>{{item.salary}}</td>
                </tr>
            </table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button v-on:click="handleDetailClose">关闭</el-button>
                </span>
            </template>
        </el-dialog>

    </div>



    <script type="text/javascript">
        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {
                const tableData = ref([]);
                const djr = ref();
                const djsj = ref();
                const tableData3 = ref([]);
                const salaryStandardDetailsHeaders = ref(['序号', '档案编号', '姓名', '薪酬基本明细', '奖励金额', '销售绩效总额', '应扣金额', '实发金额']);
                const ss_id = ref("@ViewBag.ss_id");
                const sg_id = ref("@ViewBag.sg_id");
                const total = ref();
                const total2 = ref();
                const total3 = ref();
                const detailModalVisible = ref(false);

                function fill() {
                  axios.get(`/SDM_sct/Index3?ss_id=${ss_id.value}&sg_id=${sg_id.value}`)
                  .then(res => {
                      //console.info(res.data.zhi.list_sgd);
                      tableData.value = res.data.zhi.list_sgd;
                      total.value = tableData.value.length;
                      djr.value = res.data.zhi.class_sg.register;
                      console.info(djr.value);
                      djsj.value = res.data.zhi.class_sg.regist_time;
                      console.info(djsj.value);
                      let totalSalary = 0;
                      let totalPaid = 0;

                      tableData.value.forEach(item => {
                          totalSalary += parseFloat(item.salary_standard_sum) || 0;
                          totalPaid += parseFloat(item.salary_paid_sum) || 0;
                      });
                      
                      total2.value = isNaN(totalSalary) ? '0.00' : totalSalary.toFixed(2);
                      total3.value = isNaN(totalPaid) ? '0.00' : totalPaid.toFixed(2);
                      //console.info(tableData.value);
                      
                      
                  }).catch(err => {
                      console.info(err)
                  })

                }
                function getColumnWidth(file){
                    if(file == 1){
                        return '203px'
                    }
                    return 'auto'
                }
                function openDetailModal(item) {
                    // 这里假设图片路径存储在item.detail_image字段中
                    // 实际应用中请根据后端返回的字段名调整
                    console.info(item.human_id);
                    axios.get(`/SDM_sct/Index4?h_id=${item.human_id}`)
                        .then(res => {
                            tableData3.value = res.data.zhi;

                        })
                        .catch(err => {
                            console.error('数据获取失败', err);
                            ElMessage.error('数据获取失败，请联系管理员');
                        });
                    detailModalVisible.value = true;
                }
                function handleDetailClose() {
                    detailModalVisible.value = false;
                }

                fill();

                return {
                    tableData,
                    djr,
                    djsj,
                    tableData3,
                    salaryStandardDetailsHeaders,
                    ss_id,
                    sg_id,
                    total,
                    total2,
                    total3,
                    getColumnWidth,
                    openDetailModal,
                    handleDetailClose,
                    detailModalVisible
                };
            }
        });


        app.use(ElementPlus).mount('#app');

    </script>
</body>
</html>